<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医疗服务平台</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container">
    <!-- 搜索栏 -->
    <div class="search-bar">
        <i class="fas fa-search"></i>
        <input type="text" placeholder="搜索应用、知识">
        <i class="fas fa-arrow-right"></i>
    </div>

    <!-- 家庭医生在线预约 -->
    <div class="banner-container">
        <div class="banner-wrapper">
            <div class="banner">
                <div class="banner-content">
                    <h2>家庭医生在线预约</h2>
                    <p>智能家庭预约全周期管理</p>
                </div>
                <div class="banner-image">
                    <img src="https://picsum.photos/200/300" alt="家庭医生">
                </div>
            </div>
            <div class="banner">
                <div class="banner-content">
                    <h2>专家门诊预约</h2>
                    <p>三甲医院专家面对面问诊</p>
                </div>
                <div class="banner-image">
                    <img src="https://picsum.photos/200/301" alt="专家门诊">
                </div>
            </div>
            <div class="banner">
                <div class="banner-content">
                    <h2>儿科专项服务</h2>
                    <p>儿童健康守护全方位</p>
                </div>
                <div class="banner-image">
                    <img src="https://picsum.photos/200/302" alt="儿科服务">
                </div>
            </div>
        </div>
        <div class="banner-dots">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <button class="banner-btn prev"><i class="fas fa-chevron-left"></i></button>
        <button class="banner-btn next"><i class="fas fa-chevron-right"></i></button>
    </div>

    <!-- 快捷功能区 -->
    <div class="quick-access">
        <div class="quick-item" onclick="window.location.href='/demo/appointment/appointment.html'">
            <i class="fas fa-calendar-alt"></i>
            <span>预约挂号</span>
        </div>
        <div class="quick-item" onclick="window.location.href='/demo/doctor_appointment/doctor_appointment.html'">
            <i class="fas fa-user-md"></i>
            <span>医生预约</span>
        </div>
        <div class="quick-item" onclick="window.location.href='/demo/ai_medicine/ai_medicine.html'">
            <i class="fas fa-robot"></i>
            <span>AI用药助手</span>
        </div>
        <div class="quick-item" onclick="window.location.href='/demo/ai_health/ai_health.html'">
            <i class="fas fa-heartbeat"></i>
            <span>AI健康助手</span>
        </div>
    </div>

    <!-- 就医服务 -->
    <section class="service-section">
        <h3>就医服务</h3>
        <div class="service-grid">
            <div class="service-item" onclick="window.location.href='/demo/health_code/health_code.html'">
                <i class="fas fa-qrcode"></i>
                <span>电子健康码</span>
            </div>
            <div class="service-item" onclick="window.location.href='/demo/records.html'">
                <i class="fas fa-file-medical"></i>
                <span>健康档案</span>
            </div>
            <div class="service-item" onclick="window.location.href='/demo/vaccine/vaccine.html'">
                <i class="fas fa-syringe"></i>
                <span>疫苗查询</span>
            </div>
            <div class="service-item">
                <i class="fas fa-comment-medical"></i>
                <span>就医评价</span>
            </div>
        </div>
    </section>

    <!-- 健康体检 -->
    <section class="checkup-section">
        <h3>健康体检</h3>
        <div class="banner-small" onclick="window.location.href='/demo/physical_exam/physical_exam.html'" style="cursor: pointer;">
            <div class="banner-content">
                <h4>健康体检一键预约</h4>
                <p>精准预约 守护健康</p>
            </div>
        </div>
    </section>

    <!-- 发热门诊大厅 -->
    <section class="fever-section">
        <h3>发热门诊大厅</h3>
        <div class="fever-grid">
            <div class="fever-item" onclick="window.location.href='/demo/fever_clinic/guide.html'" style="cursor: pointer;">
                <i class="fas fa-thermometer-half"></i>
                <span>发热门诊指南</span>
                <small>随时查看就医方案</small>
            </div>
            <div class="fever-item" onclick="window.location.href='/demo/fever_clinic/records.html'" style="cursor: pointer;">
                <i class="fas fa-notes-medical"></i>
                <span>发热门诊记录</span>
                <small>就诊记录全掌握</small>
            </div>
        </div>
    </section>

    <!-- 健康生活建议 -->
    <section class="health-tips-section">
        <h3>健康生活建议</h3>
        <div class="article-list">
            <div class="article-item">
                <div class="article-content">
                    <h4>秋季养生：这些食材要多吃</h4>
                    <p>秋季养生重在"收敛"，推荐6种应季食材...</p>
                    <div class="article-meta">
                        <span><i class="fas fa-eye"></i> 2.3k</span>
                        <span><i class="fas fa-thumbs-up"></i> 156</span>
                    </div>
                </div>
                <div class="article-image">
                    <img src="path/to/your/image.jpg" alt="文章配图">
                </div>
            </div>
            <div class="article-item">
                <div class="article-content">
                    <h4>每天8000步？科学走路指南</h4>
                    <p>专家解读：合理运动量，让走路更健康...</p>
                    <div class="article-meta">
                        <span><i class="fas fa-eye"></i> 1.8k</span>
                        <span><i class="fas fa-thumbs-up"></i> 142</span>
                    </div>
                </div>
                <div class="article-image">
                    <img src="path/to/your/image.jpg" alt="文章配图">
                </div>
            </div>
            <div class="article-item">
                <div class="article-content">
                    <h4>健康睡眠的七个小技巧</h4>
                    <p>改善睡眠质量，从这些小习惯开始...</p>
                    <div class="article-meta">
                        <span><i class="fas fa-eye"></i> 3.1k</span>
                        <span><i class="fas fa-thumbs-up"></i> 189</span>
                    </div>
                </div>
                <div class="article-image">
                    <img src="path/to/your/image.jpg" alt="文章配图">
                </div>
            </div>
        </div>
    </section>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <div class="nav-item active">
            <i class="fas fa-hospital"></i>
            <span>医疗</span>
        </div>
        <div class="nav-item" onclick="window.location.href='/demo/knowledge/knowledge.html'">
            <i class="fas fa-book-medical"></i>
            <span>知识</span>
        </div>
        <div class="nav-item" onclick="window.location.href='/demo/records/records.html'">
            <i class="fas fa-heart"></i>
            <span>档案</span>
        </div>
        <div class="nav-item" onclick="window.location.href='/demo/personal_profile/personal_profile.html'">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </div>
    </nav>
</div>
<script src="./script.js"></script>
</body>
</html>
